<template>
    <view class="log-item-content">
        <view class="log-title">{{ info.name }}</view>
        <view class="item-box">
            <view
                class="item-con"
                v-for="(item, index) in curList"
                :key="index"
                @click="navigateTo(`/pagesA/log_detail/index?id=${item.id}`)"
            >
                <image v-if="item.face" :src="rec_url + item.face" class="log-img" />
                <view v-else class="log-img-no" />
                <view class="item-title">{{ item.name }}</view>
                <view class="item-time">{{ item.create_time }}</view>
            </view>
        </view>
        <view class="load-more" v-if="total > 4">
            <text :class="[isGreen ? 'more-green' : '']" @click="loadMore()">加载更多</text>
            <image v-if="isGreen" src="../../static/images/log_more.png" class="more-img" />
            <image v-else src="../../static/images/log_more_grey.png" class="more-img" />
        </view>
    </view>
</template>

<script>
import { navigateTo, navigateBack } from "@/hooks"
import { walkList } from "@/api/home.js";

export default {
  data() {
        return {
            navigateTo,
            isGreen: true,
            curPage: 0,
            total: 0,
            curList: []
        }
    },
    props: {
        info: {
            type: Object,
            default: {}
        },
    },
    computed: {
		rec_url() {
			return this.$store.getters.rec_url;
		}
	},
    onLoad() {
	},
    onReachBottom() {
		this.loadMore();
	},
    mounted() {
        this.curPage = this.info.walk_list.current_page;
        this.total = this.info.walk_list.total;
        this.curList = [...this.info.walk_list.data];
    },
    methods: {
        loadMore() {
            let isLoad = Math.ceil(this.total / 4) > this.curPage;
            if (isLoad) {
                this.getWalkList();
            } else {
                this.isGreen = false;
                uni.showToast({
                    title: '暂无更多数据',
                    icon: 'none',
                });
            }
        },
        getWalkList() {
            let params = {
                page: this.curPage + 1,
                limit: 4,
                spot_id: this.info.spot_id
            };
            walkList(params).then(res => {
                if (res.code == 200) {
                    this.curPage = params.page;
                    let dataArr = [...this.curList];
                    if (params.page > 1) {
						dataArr.push(...res.data.data)
					} else {
						dataArr = res.data.data;
					}
                    this.curList = dataArr;
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.log-item-content {
    padding: 40rpx 24rpx 30rpx;
    margin-bottom: 24rpx;
    margin-top: 14rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    background: #FFFFFF;
    background-image: url('../../static/images/log_bg.png');
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 24rpx;

    .log-bg {
        width: 100%;
        height: 170rpx;
        border-radius: 24rpx;
    }

    .log-title {
        margin-bottom: 24rpx;
        font-weight: 700;
        font-size: 36rpx;
        color: #3D3D3D;
    }
    .item-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .item-con {
            width: 48%;
            margin-bottom: 20rpx;
        }
        .log-img {
            // width: 318rpx;
            width: 100%;
            height: 204rpx;
            border-radius: 12rpx;
        }
        .log-img-no {
            width: 100%;
            height: 204rpx;
            border-radius: 12rpx;
            border: 1px solid #f9f9f9;
        }
        .item-title {
            margin: 12rpx 0;
            font-weight: 700;
            font-size: 28rpx;
            color: #3D3D3D;
        }
    }
    .load-more {
        width: 184rpx;
        height: 48rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        text-align: center;
        background: #F6F9F8;
        border-radius: 26rpx;

        .more-green {
            color: #0CCA92;
        }

        .more-img {
            width: 28rpx;
            height: 28rpx;
            margin-left: 4rpx;
        }
    }
}

</style>